<script setup>
import { ref } from 'vue'

const radio2 = ref('1')

// //拿到教师数据
// import { storeToRefs } from 'pinia'
// import { useAppStore } from '@/stores'
// const not = useAppStore()
// const { tableData } = storeToRefs(not)
// const { getNotice } = not
// getNotice()
</script>
<template>
  <div style="background-color: #fff; height: 100vw">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>软件22-1</span>
        </div>
      </template>

      <div class="my-2 flex items-center text-sm">
        <span style="color: #a8b0ce">筛选</span>
        <el-radio-group v-model="radio2" class="ml-4">
          <el-radio value="1">全部</el-radio>
          <el-radio value="2"> 已完成</el-radio>
          <el-radio value="3">未完成</el-radio>
        </el-radio-group>
      </div>
      <div class="my-card">
        <div class="home">
          <HomeWork
            style="line-height: 60px; position: relative; top: 21px; margin-right: 10px"
          ></HomeWork>
          <a href="https://www.examcoo.com/editor/do/exam/id/120557" target="_blank"
            >数据库平时练习</a
          >
        </div>
        <div class="home">
          <HomeWork
            style="line-height: 60px; position: relative; top: 21px; margin-right: 10px"
          ></HomeWork>
          <a href="https://www.examcoo.com/editor/do/exam/id/120531" target="_blank"
            >数据库基础练习</a
          >
        </div>
      </div>
    </el-card>

    <div class="common-layout"></div>
  </div>
</template>
<style lang="scss" scoped>
.ml-4 {
  margin-left: 20px;
}
.my-card {
  margin-top: 2.25rem;

  .home {
    height: 60px;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    a {
      line-height: 60px;
      justify-items: center;
      align-items: center;
      text-decoration: none;
      color: black;
    }
    &:hover {
      background-color: #ebebeb;
      text-decoration: none;
      cursor: pointer;
    }
  }
}
</style>
